<template>
  <li @click="styleDialog = true">
    <img src="/static/assets/3d/b2.png" alt="" srcset="" style="width: 20px; height: 20px" />
    <span>样式</span>
  </li>

  <li @click="infoDialog = true" style="height: 40px; width: 40px; list-style: none">
    <img src="/static/assets/3d/b3.png" alt="" srcset="" style="width: 20px; height: 20px" />
    <span>编辑</span>
  </li>
  <li @click="delDialog = true" style="height: 40px; width: 40px; list-style: none">
    <img src="/static/assets/3d/b4.png" alt="" srcset="" style="width: 20px; height: 20px" />
    <span>删除</span>
  </li>

  <li @click="imgDialog = true" style="height: 40px; width: 40px; list-style: none">
    <img src="/static/assets/3d/b1.png" alt="" srcset="" style="width: 20px; height: 20px" />
    <span>图片</span>
  </li>

  <li @click="videoDialog = true" style="height: 40px; width: 40px; list-style: none">
    <img src="/static/assets/3d/b5.png" alt="" srcset="" style="width: 20px; height: 20px" />
    <span>视频</span>
  </li>

  <teleport to="body">
    <el-dialog v-model="delDialog" width="500">
      <span>确认删除该要素？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="delDialog = false">取消</el-button>
          <el-button type="primary" @click="deleteMark"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </teleport>

  <div class="pst">
    <autoDialog
      title="编辑详细"
      v-if="infoDialog"
      :isFixed="false"
      :isuseDraggable="false"
      @close="closeInfo"
      :isAbsolute="true"
    >
      <div class="list">
        <span class="title">名称：</span>
        <darkInput
          v-model="markname"
          placeholder="请输入名称"
          style="flex: 1; border: 1px solid #b9eeff"
        />
      </div>
      <div class="list">
        <span class="title">描述：</span>
        <textarea name="" v-model="markmemo" id="area"></textarea>
      </div>
      <div>
        <el-button @click="closeInfo">取消</el-button>
        <el-button type="primary" @click="savemarkInfo">保存</el-button>
      </div>
    </autoDialog>
    <autoDialog
      title="修改图标"
      v-if="styleDialog"
      :isFixed="false"
      :isuseDraggable="false"
      @close="closeStyle"
      :isAbsolute="true"
    >
      <div style="display: flex; align-items: center">
        <span>当前图标：</span>
        <img :src="pointStyle" alt="" />
      </div>
      <br />
      <div class="content" style="height: 400px; overflow: auto; display: flex; flex-wrap: wrap">
        <div v-for="item in imgData" @click="selectStyle(item.url)" :key="item.id">
          <img :src="item.url" alt="" style="width: 32px; height: 32px; object-fit: contain" />
          <span>{{ item.url.match(regex)[1] }}</span>
        </div>
      </div>

      <br />
      <br />
      <div>
        <el-button @click="closeStyle">取消</el-button>
        <el-button type="primary" @click="saveStyle">保存</el-button>
      </div>
    </autoDialog>

    <autoDialog
      title="修改图片"
      v-if="imgDialog"
      :isFixed="false"
      :isuseDraggable="false"
      @close="closeImg"
      :isAbsolute="true"
    >
      <el-upload
        class="upload-demo"
        :on-remove="handleRemove"
        :file-list="fileList"
        list-type="picture-card"
        :auto-upload="false"
        :on-change="handleChange"
        accept="image/*"
      >
        <el-icon><Plus /></el-icon>
        <template #file="{ file }">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <el-icon><Delete /></el-icon>
              </span>
            </span>
          </div>
        </template>
        <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
      </el-upload>

      <br />
      <div>
        <el-button @click="closeImg">取消</el-button>
        <el-button type="primary" @click="saveImg">保存</el-button>
      </div>
    </autoDialog>

    <autoDialog
      title="修改视频"
      v-if="videoDialog"
      :isFixed="false"
      :isuseDraggable="false"
      @close="closeVideo"
      :isAbsolute="true"
    >
      <el-upload
        class="upload-demo"
        :file-list="fileListVideo"
        list-type="picture-card"
        :auto-upload="false"
        :on-change="handleChangeVideo"
        accept="video/*"
      >
        <el-icon><Plus /></el-icon>
        <template #file="{ file }">
          <div>
            <video :src="file.url" controls></video>
            <span class="el-upload-list__item-actions">
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemoveVideo(file)"
              >
                <el-icon><Delete /></el-icon>
              </span>
            </span>
          </div>
        </template>
      </el-upload>

      <br />
      <div>
        <el-button @click="closeVideo">取消</el-button>
        <el-button type="primary" @click="saveVideo">保存视频</el-button>
      </div>
    </autoDialog>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import { deleteSysmMapMarkFile } from '../../../../api/sysmapmark'
import { addSysmMapMark, deleteSysmMapMark, saveysmMapMark } from '../../../../api/sysmapmark'
import imginfo from './img'

const props = defineProps(['markInfo', 'imgAndVideoArr'])
const emits = defineEmits(['delEntity', 'updateData', 'updateMarkData'])
let regex = /\/([^\/]+)\.\w+$/
let { entity } = props.markInfo
const markname = ref(props.markInfo.markName)
var { markMemo } = props.markInfo
const markmemo = ref(markMemo || '')

const fileListVideo = ref([])
const fileList = ref([])

watch(
  () => props.markInfo.markFiles,
  () => {
    fileListVideo.value = isLengthZero(props.markInfo.markFiles, 'video')
    fileList.value = isLengthZero(props.markInfo.markFiles, 'image')
  }
)

const imgData = imginfo
const styleDialog = ref(false)
const pointStyle = ref(props.markInfo.markStyle.img)

const imgDialog = ref(false)
const delDialog = ref(false)
const videoDialog = ref(false)

function isVideoOrImageByExtension(fileType) {
  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
  const videoExtensions = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'webm']
  if (imageExtensions.includes(fileType)) {
    return 'image'
  } else if (videoExtensions.includes(fileType)) {
    return 'video'
  }
  return 'unknown'
}
function isLengthZero(e, type) {
  var arr = []
  var videoArr = []
  e.forEach((item, i) => {
    var ity = isVideoOrImageByExtension(item.fileType)
    if (ity === 'image') {
      arr.push({
        index: i,
        url: URL.createObjectURL(props.imgAndVideoArr[i]),
        fileID: item.id,
        type: 'other',
        name: item.filename,
        status: 'success'
      })
    }
    if (ity === 'video') {
      videoArr.push({
        index: i,
        fileID: item.id,
        url: URL.createObjectURL(props.imgAndVideoArr[i]),
        type: 'other',
        name: item.filename,
        status: 'success'
      })
    }
  })

  return type === 'image' ? arr : videoArr
}

watch(
  () => pointStyle.value,
  (newval) => {
    map3d.changeNowMarkItem(props.markInfo.entity, { image: newval })
  }
)

watch(
  () => [imgDialog.value, videoDialog.value],
  (newval) => {
    if (newval) {
      fileListVideo.value = isLengthZero(props.markInfo.markFiles, 'video')
      fileList.value = isLengthZero(props.markInfo.markFiles, 'image')
    }
  }
)

const selectStyle = (e) => {
  pointStyle.value = e
}
const closeStyle = () => {
  styleDialog.value = false
  pointStyle.value = props.markInfo.markStyle.img
}
//保存图标
const saveStyle = () => {
  let formData = new FormData()
  map3d.changeNowMarkItem(props.markInfo.entity, { image: pointStyle.value })
  let option = props.markInfo.entity.toGeoJSON()
  formData.append('id', props.markInfo.id)
  formData.append('markExt', JSON.stringify(option))
  formData.append('markStyle', JSON.stringify({ img: pointStyle.value }))
  saveysmMapMark(formData)
    .then((e) => {
      ElMessage({
        message: '编辑成功',
        type: 'success',
        plain: true
      })
      props.markInfo.markStyle = { img: pointStyle.value }
      props.markInfo.markExt = JSON.stringify(props.markInfo.entity.toGeoJSON())
      styleDialog.value = false
    })
    .catch(() => {
      map3d.changeNowMarkItem(props.markInfo.entity, { image: props.markInfo.markStyle.img })
    })
}

//关闭图片弹窗
const closeImg = () => {
  imgDialog.value = false
  fileList.value = isLengthZero(props.markInfo.markFiles, 'image')
  console.log(fileList.value)
}
///关闭图片弹窗
const closeVideo = () => {
  videoDialog.value = false
  fileListVideo.value = isLengthZero(props.markInfo.markFiles, 'video')
}
//打开编辑
const infoDialog = ref(false)
const closeInfo = () => {
  infoDialog.value = false
  markname.value = props.markInfo.markName
  markmemo.value = props.markInfo.markMemo
}

//删除标注
const deleteMark = () => {
  var data = {
    id: props.markInfo.id
  }
  deleteSysmMapMark(data).then((e) => {
    delDialog.value = !delDialog.value
    emits('delEntity')
    ElMessage({
      message: '删除成功',
      type: 'success'
    })
  })
}

//保存编辑
const savemarkInfo = () => {
  if (markname.value === '') {
    ElMessage({
      message: '请输入标注名称',
      type: 'warning',
      plain: true
    })
    return
  }

  let formData = new FormData()
  formData.append('id', props.markInfo.id)
  formData.append('markName', markname.value)
  if (markmemo.value) {
    formData.append('markMemo', markmemo.value)
  }
  saveysmMapMark(formData)
    .then((e) => {
      ElMessage({
        message: '编辑成功',
        type: 'success',
        plain: true
      })
      props.markInfo.markName = markname.value
      props.markInfo.markMemo = markmemo.value
      infoDialog.value = false
    })
    .catch(() => {
      markname.value = props.markInfo.markName
      markmemo.value = props.markInfo.markMemo
    })
}

//添加图片
const handleChange = (e) => {
  console.log(e)

  fileList.value.push(e)
}
//保存图片
const saveImg = () => {
  let newFiles = fileList.value.filter((file) => file.status === 'ready')
  let formData = new FormData()
  formData.append('id', props.markInfo.id)
  for (const item of newFiles) {
    formData.append('files', item.raw)
  }
  saveysmMapMark(formData).then((e) => {
    ElMessage({
      message: '编辑成功',
      type: 'success',
      plain: true
    })

    emits('updateData', entity)
    imgDialog.value = false
  })
}

//删除图片
const handleRemove = (e, i) => {
  if (e.type && e.type === 'other') {
    deleteSysmMapMarkFile({ id: e.fileID }).then(() => {
      ElMessage({
        message: '删除成功',
        type: 'success'
      })
      emits('updateData', entity)
      fileList.value = fileList.value.filter((item) => item.fileID !== e.fileID)
    })
    return
  }
  fileList.value = fileList.value.filter((item) => item.uid !== e.uid)
}

//保存视频
const saveVideo = () => {
  let newFiles = fileListVideo.value.filter((file) => file.status === 'ready')
  let formData = new FormData()
  formData.append('id', props.markInfo.id)
  for (const item of newFiles) {
    formData.append('files', item.raw)
  }
  saveysmMapMark(formData).then((e) => {
    ElMessage({
      message: '编辑成功',
      type: 'success',
      plain: true
    })
    emits('updateData', entity)
    videoDialog.value = false
  })
}
//添加视频
const handleChangeVideo = (e) => {
  fileListVideo.value.push(e)
}
//删除视频
const handleRemoveVideo = (e, index) => {
  if (e.type && e.type === 'other') {
    deleteSysmMapMarkFile({ id: e.fileID }).then(() => {
      ElMessage({
        message: '删除成功',
        type: 'success'
      })
      emits('updateData', entity)
      fileListVideo.value = fileListVideo.value.filter((item) => item.fileID !== e.fileID)
    })
    return
  }

  fileListVideo.value = fileListVideo.value.filter((e) => e.uid !== d.uid)
}
</script>

<style lang="scss" scoped>
.pst {
  position: absolute;
  right: 0;
  top: 0;
}
li {
  display: flex;
  height: 40px;
  width: 40px;
  list-style: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #83dcf9;
  cursor: pointer;
}
.content {
  background-color: #fff;
  color: #000;
  div {
    width: 85px;
    margin-right: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    margin-top: 10px;
    span {
      text-align: center;
    }
  }
}
.list {
  display: flex;
  margin-bottom: 15px;
  align-items: center;

  .title {
    display: inline-block;
    margin-right: 5px;
  }
  #area {
    flex: 1;
    min-height: 120px;
    background-color: rgba(0, 25, 51, 0.8);
    border-radius: 8px;
    border: 1px solid #0e9cff;
    color: #b9eeff;
    font-size: 16px;
    padding: 10px;
    border: 1px solid #b9eeff;
    outline: none;
  }
}
</style>